<template>
  <div>
    <!-- <h1>   - - - - - - - 我是身份查询页面- - - - - - -  </h1> -->

    <input type="text" v-model="id_num" @keyup.enter='getMsg' placeholder="输入身份证号码查身份信息">

    <h3>生日：{{id_msg.birthday}}</h3>
    <h3>年龄：{{id_msg.age}}</h3>
    <h3>性别：{{id_msg.gender}}</h3>
    <h3>地址：{{id_msg.address}}</h3>


  </div>
</template>


<script>

export default {
  data() {
    return {
      id_num:'',
      id_msg:{}
    };
  },
  methods: {

    getMsg(){
      let _this = this
      _this.$axios.get('http://hd215.api.yesapi.cn/?&s=App.Common_IDCard.Parse&app_key=FB47904BC3C79E2D81F3DE6DA53316FF&id_number='+_this.id_num).then(res=>{
          _this.id_msg = res.data.data.info
          _this.id_num = ''
      })
    }

  },
};

</script>

<style lang="less" scoped>

    input[type=text]{
        width: 80%;
        line-height: 30px;
        border-radius: 15px;
        font-size: 15px;
        text-align: center;
        margin: 20px auto;
        display: block;
        -webkit-appearance: none;
        border-color: #aaa;
        &:focus{
          border-color: teal;
        }
    }

    h3{
      font-size: 15px;
      font-weight: 300;
      width: 80%;
      margin: 18px auto;
      background-color: #f8f8f8;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px 10px;
      letter-spacing: 2px;
    }


</style>
